<template>
	<popmanager :show="show" type="center">
		<view class="zan-dialog--container">
			<view v-if=" title " class="zan-dialog__header">{{ title }}</view>
			<view class="zan-dialog__content" :class=" [ title ? 'zan-dialog__content--title' : ''] ">
				<text>{{ message }}</text>
			</view>
			<view class="zan-dialog__footer zan-dialog__footer--vertical" :class="[ buttonsShowVertical ? 'zan-dialog__footer--vertical' : 'zan-dialog__footer--horizon' ]">
				<block v-for="(item,index) in buttons " v-key="item.text + '-' + item.type ">
					<zanbtn class="zan-dialog__button" :custom-class=" index === 0 ? 'zan-dialog__button-inside--first' : 'zan-dialog__button-inside' "
					 :data-type="item.type" :data-open-type=" item.openType" :open-type=" item.openType " @btnclick="handleButtonClick"
					 @getuserinfo="handleUserInfoResponse" @getphonenumber="handlePhoneResponse" @opensetting="handleOpenSettingResponse">
						<view :style="[{color: color }]">{{ item.text }}</view>
					</zanbtn>
				</block>
			</view>
		</view>
	</popmanager>

</template>

<script>
	var _f = function _f() {};
	var needResponseOpenTypes = ['getUserInfo', 'getPhoneNumber', 'openSetting'];

	import popmanager from '../goods/popmanager.vue'
	import zanbtn from '../btn/btn.vue'
	export default {
		computed: {
			color() {
				return '#333'
			}
		},
		components: {
			popmanager,
			zanbtn
		},
		props: {
			overlay: {
				type: Boolean,
				value: true
			},

			closeOnClickOverlay: {
				type: Boolean,
				value: true
			},

			// 弹出方向
			type: {
				type: String,
				value: 'center'
			}
		},
		data() {
			return {
				// 标题
				title: '',
				// 自定义 btn 列表
				// { type: 按钮类型，回调时以此作为区分依据，text: 按钮文案, color: 按钮文字颜色, openType: 微信开放能力 }
				buttons: [],
				// 内容
				message: ' ',
				// 选择节点
				selector: '#zan-dialog',
				// 按钮是否展示为纵向
				buttonsShowVertical: false,
				// 是否展示确定
				showConfirmButton: true,
				// 确认按钮文案
				confirmButtonText: '确定',
				// 确认按钮颜色
				confirmButtonColor: '#3CC51F',
				// 是否展示取消
				showCancelButton: false,
				// 取消按钮文案
				cancelButtonText: '取消',
				// 取消按钮颜色
				cancelButtonColor: '#333',
				key: '',
				autoClose: true,
				show: false,
				showCustomBtns: false,
				promiseFunc: {},
				openTypePromiseFunc: {}
			};
		},

		methods: {
			handleButtonClick: function handleButtonClick(e) {
				var _this = this;

				var _e$currentTarget = e.currentTarget,
					currentTarget = _e$currentTarget === undefined ? {} : _e$currentTarget;
				var _currentTarget$datase = currentTarget.dataset,
					dataset = _currentTarget$datase === undefined ? {} : _currentTarget$datase;

				// 获取当次弹出框的信息

				var _ref = this.promiseFunc || {},
					_ref$resolve = _ref.resolve,
					resolve = _ref$resolve === undefined ? _f : _ref$resolve,
					_ref$reject = _ref.reject,
					reject = _ref$reject === undefined ? _f : _ref$reject;

				// 重置展示


				if (this.autoClose) {
					this.setData({
						show: false
					});
				}

				// 自定义按钮，全部 resolve 形式返回，根据 type 区分点击按钮
				if (this.showCustomBtns) {
					var isNeedOpenDataButton = needResponseOpenTypes.indexOf(dataset.openType) > -1;
					var resolveData = {
						type: dataset.type
					};
					// 如果需要 openData，就额外返回一个 promise，用于后续 open 数据返回
					if (isNeedOpenDataButton) {
						resolveData.openDataPromise = new Promise(function(resolve, reject) {
							_this.setData({
								openTypePromiseFunc: {
									resolve: resolve,
									reject: reject
								}
							});
						});
						resolveData.hasOpenDataPromise = true;
					}
					resolve(resolveData);
					return;
				}

				// 默认按钮，确认为 resolve，取消为 reject
				if (dataset.type === 'confirm') {
					resolve({
						type: 'confirm'
					});
				} else {
					reject({
						type: 'cancel'
					});
				}

				this.setData({
					promiseFunc: {}
				});
			},


			// 以下为处理微信按钮开放能力的逻辑
			handleUserInfoResponse: function handleUserInfoResponse(_ref2) {
				var detail = _ref2.detail;

				this.__handleOpenDataResponse({
					type: detail.errMsg === 'getUserInfo:ok' ? 'resolve' : 'reject',
					data: detail
				});
			},
			handlePhoneResponse: function handlePhoneResponse(_ref3) {
				var detail = _ref3.detail;

				this.__handleOpenDataResponse({
					type: detail.errMsg === 'getPhoneNumber:ok' ? 'resolve' : 'reject',
					data: detail
				});
			},
			handleOpenSettingResponse: function handleOpenSettingResponse(_ref4) {
				var detail = _ref4.detail;

				this.__handleOpenDataResponse({
					type: detail.errMsg === 'openSetting:ok' ? 'resolve' : 'reject',
					data: detail
				});
			},
			__handleOpenDataResponse: function __handleOpenDataResponse(_ref5) {
				var _ref5$type = _ref5.type,
					type = _ref5$type === undefined ? 'resolve' : _ref5$type,
					_ref5$data = _ref5.data,
					data = _ref5$data === undefined ? {} : _ref5$data;

				var promiseFuncs = this.openTypePromiseFunc || {};
				var responseFunc = promiseFuncs[type] || _f;

				responseFunc(data);
				this.setData({
					openTypePromiseFunc: null
				});
			}
		}
	}
</script>

<style>
	.zan-dialog--container {
		width: 80vw;
		font-size: 16px;
		overflow: hidden;
		border-radius: 4px;
		background-color: #fff;
		color: #333
	}

	.zan-dialog__header {
		padding: 15px 0 0;
		text-align: center
	}

	.zan-dialog__content {
		position: relative;
		padding: 30upx 40upx;
		line-height: 1.5;
		min-height: 80upx
	}

	.zan-dialog__content::after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 200%;
		height: 200%;
		-webkit-transform: scale(.5);
		transform: scale(.5);
		-webkit-transform-origin: 0 0;
		transform-origin: 0 0;
		pointer-events: none;
		box-sizing: border-box;
		border: 0 solid #e5e5e5;
		border-bottom-width: 2upx
	}

	.zan-dialog__content--title {
		color: #999;
		font-size: 28upx
	}

	.zan-dialog__footer {
		overflow: hidden
	}

	.zan-dialog__button {
		-webkit-box-flex: 1;
		flex: 1
	}

	.zan-dialog__button-inside,
	.zan-dialog__button-inside--first {
		margin-bottom: 0;
		line-height: 100upx;
		height: 100upx
	}

	.zan-dialog__button-inside--first::after,
	.zan-dialog__button-inside::after {
		border-width: 0;
		border-radius: 0
	}

	.zan-dialog__footer--horizon {
		display: -webkit-box;
		display: flex
	}

	.zan-dialog__footer--horizon .zan-dialog__button-inside::after {
		border-left-width: 2upx
	}

	.zan-dialog__footer--vertical .zan-dialog__button-inside::after {
		border-top-width: 2upx
	}
</style>
